<template>
    <div class="flex-container">
        <div class="flex-item" @click="handleClick('invoice')">
            <img style="width: 48px; height: 48px" src="@/assets/invoice.svg" />
            <div style="margin: 20px 0px">发票助手</div>
            <div style="font-size: 12px">智能识别发票信息</div>
        </div>
        <div class="flex-item" @click="handleClick('merge')">
            <img style="width: 48px; height: 48px" src="@/assets/merge.svg" />
            <div style="margin: 20px 0px">PDF 合并</div>
            <div style="font-size: 12px">自由排序合并文件</div>
        </div>
        <!-- <div class="flex-item" @click="handleClick('split')">
            <img style="width: 48px; height: 48px" src="@/assets/split.svg" />
            <div style="margin: 20px 0px">PDF 拆分</div>
            <div style="font-size: 12px">提取需要的页面</div>
        </div> -->
        <div class="flex-item" @click="handleClick('encryption')">
            <img style="width: 48px; height: 48px" src="@/assets/encryption.svg" />
            <div style="margin: 20px 0px">PDF 加密</div>
            <div style="font-size: 12px">批量加密PDF文件</div>
        </div>
        <div class="flex-item" @click="handleClick('decryption')">
            <img style="width: 48px; height: 48px" src="@/assets/decryption.svg" />
            <div style="margin: 20px 0px">PDF 解锁</div>
            <div style="font-size: 12px">批量解锁PDF文件</div>
        </div>
        <div class="flex-item" @click="handleClick('edit')">
            <img style="width: 48px; height: 48px" src="@/assets/edit.svg" />
            <div style="margin: 20px 0px">PDF 编辑</div>
            <div style="font-size: 12px">PDF页面旋转、删除</div>
        </div>
        <div class="flex-item" @click="handleClick('watermark')">
            <img style="width: 48px; height: 48px" src="@/assets/watermark.svg" />
            <div style="margin: 20px 0px">PDF 水印</div>
            <div style="font-size: 12px">PDF 添加自定义水印</div>
        </div>
        <div class="flex-item" @click="handleClick('image')">
            <img style="width: 48px; height: 48px" src="@/assets/image.svg" />
            <div style="margin: 20px 0px">PDF -> 图片</div>
            <div style="font-size: 12px">导出为PNG、JPG并压缩</div>
        </div>
        <div class="flex-item" @click="handleClick('imageToPdf')">
            <img style="width: 48px; height: 48px" src="@/assets/pdf.svg" />
            <div style="margin: 20px 0px">图片 -> PDF</div>
            <div style="font-size: 12px">图片旋转、排序后转PDF</div>
        </div>
        <div class="flex-item" @click="handleClick('word')">
            <img style="width: 48px; height: 48px" src="@/assets/word.svg" />
            <div style="margin: 20px 0px">Word -> PDF</div>
            <div style="font-size: 12px">docx 转 PDF</div>
        </div>
        <div class="flex-item" @click="handleClick('custom')">
            <img style="width: 48px; height: 48px" src="@/assets/custom.svg" />
            <div style="margin: 20px 0px">专属定制</div>
            <div style="font-size: 12px">根据你的业务来定制</div>
        </div>
        <el-dialog title="联系我们" width="520px" :visible.sync="visible">
            <h3 style="margin-top: -10px">电子邮箱：15160037796@163.com</h3>
            <h3>联系电话：15160037796</h3>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            visible: false
        }
    },
    methods: {
        handleClick(type) {
            if (type === 'split') {
                this.$message.info('敬请期待')
            } else if (type === 'edit') {
                this.$message.info('敬请期待')
            } else if (type === 'custom') {
                this.visible = true
            } else {
                this.$router.push('/' + type)
            }
        }
    }
}
</script>

<style scoped>
.flex-container {
    display: flex;
    flex-wrap: wrap;
    padding: 25px;
}

.flex-item {
    flex: 0 0 auto;
    background: #f9f9f9;
    margin: 10px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 18px;
    color: #000;
    width: 150px;
    height: 200px;
    cursor: pointer;
}
</style>
